<template>
  <div id="container"><el-button type="primary" @click="remove"
    style="    z-index: 99;
    position: absolute;"
  > 移除线 </el-button></div>
</template>

<script>
/**
 * 1. 计时器动态发送当前车辆的点位数据gps
 * 
 * 2. 发送过来的定位数据用数组保存
 * 
 * 3. 当数组长度变化时 触发画线画点函数
 * 
 * 
 * 
 * 
 * 情况一： 正常情况 在登录时 刚好开始出车
 * 
 * 情况二： 当已经出车了才有用户登录（开启websocket）
 *       考虑多车多线路情况 需要后台保存 当前这个车 这个时间点的线路信息和点位信息
 *       当有 新的websocket建立连接时 把之前所有保存的 线路信息和点位信息 发送给 新的websocket连接
 * 
 *       当页面拿到 线路信息长度较长或者拥有点位信息时 车直接绘制在最后一个点 并且把之前的线路直接绘制出来
 * 
 * 情况三： 在正常情况下 用户突然退出又登录回来
 * 
 */


import MapLoader from "../plugins/AMap.js";
export default {
  name: "testmap",
  data() {
    return {
      map: null,
      path: [],
      polyline: null,
      carMarker: null,
      carMarkerCreateFlag: false,
      passedLine: null,
      passedArr: []
    }
  },
  methods: {
    remove() {
      this.map.remove(this.polyline)
    },
    mapInit() {
      MapLoader().then(
        AMap => {
          this.map = new AMap.Map("container", {
            resizeEnable: true,
            mapStyle: 'amap://styles/whitesmoke',
            center: [116.397428, 39.90923],
            zoom: 18
          });
        },
        e => {
        }
      )
    },
    drawLine(path) {
        let map = this.map
        
        for(let i = 0; i < path.length; i++) {
          this.passedArr.push([
            path[i].lng,
            path[i].lat,
          ])
        }
        this.passedArr = this.unique(this.passedArr)
        if(this.polyline) {
          map.remove(this.polyline)
        }
        this.polyline = new AMap.Polyline({
          map: map,
          showDir: true,
          // strokeColor: "#AF5",  //线颜色
          strokeColor: "#28F",  //线颜色
          strokeOpacity: 0.5,     //线透明度
          strokeWeight: 6,      //线宽
          // strokeStyle: "solid"  //线样式
        });
        // this.polyline.setExtData({extPath: path})
        // this.polyline.setMap(map)
        // this.polyline.setPath(JSON.parse(JSON.stringify(path)))
        this.polyline.setPath(JSON.parse(JSON.stringify(this.passedArr)))
        // map.setFitView()
    },
    initPassedLine() {
      this.passedLine = new AMap.Polyline({
        map: this.map,
        // path: lineArr,
        showDir: true,
        // strokeColor: "#AF5",  //线颜色
        strokeColor: "#28F",  //线颜色
        strokeOpacity: 0.5,     //线透明度
        strokeWeight: 6,      //线宽
        // strokeStyle: "solid"  //线样式
      });
    },
    initCar(position) {
      this.carMarker = new AMap.Marker({
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90,
      });
      this.carMarker.setMap(this.map)
      this.carMarker.setPosition(position)
      this.carMarker.on('moving', (e) => {
        // this.passedLine.setPath(e.passedPath);
        this.drawLine(e.passedPath)
      });
      this.carMarkerCreateFlag = true
      this.map.setFitView()
    },
    moveCar(lnglat) {
      this.carMarker.moveTo(new AMap.LngLat(...lnglat), 200)
    },
    unique(array){
      var temp = []
      var json = {}
      for(var i = 0; i < array.length; i++){
        if(!json[array[i]]){
          temp.push(array[i])
          json[array[i]] = 1
        }
      }
      return temp;
    }
  },
  mounted() {
    this.mapInit()

    let arr = [
      [116.478935,39.997761],
      [116.478939,39.997825],
      [116.478912,39.998549],
      [116.478912,39.998549],
      [116.478998,39.998555],
      [116.478998,39.998555],
      [116.479282,39.99856],
      [116.479658,39.998528],
      [116.480151,39.998453],
      [116.480784,39.998302],
      [116.480784,39.998302],
      [116.481149,39.998184],
      [116.481573,39.997997],
      [116.481863,39.997846],
      [116.482072,39.997718],
      [116.482362,39.997718],
      [116.483633,39.998935],
      [116.48367,39.998968],
      [116.484648,39.999861]
    ];
    setTimeout(() => {
      let curPoint = []
      let Timer = setInterval(() => {
        if(arr.length) {
          curPoint = arr.shift()
          this.path.push(curPoint)
          //判断 车marker 是否已创建
          if(!this.carMarkerCreateFlag) {
            this.initCar(curPoint)
            this.initPassedLine()
          }
          // this.drawLine(this.path)
          // if(this.path.length > 2) {
            this.moveCar(curPoint)
          // }
          // this.map.setFitView()
        }else {
          clearInterval(Timer)
        }
      }, 1500)
    }, 2000)
  },

}
</script>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>